<script>
import { defineComponent, computed } from 'vue';
import { createNamespace, transformSize, transformStyleSize } from '../utils';

export default defineComponent({
  name: createNamespace('Loading')[0],
  options: {
    // https://uniapp.dcloud.io/matter.html#mp
    virtualHost: true
  },
  emits: ['click'],
  props: {
    inline: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: '#c9c9c9'
    },
    type: {
      type: String,
      validator: (value) => ['circle', 'circle2', 'spinner', 'line'].includes(value),
      // default: () => (getSystemInfo().isIos ? 'spinner' : 'circle2')
      default: 'circle2'
    },
    size: {
      type: [String, Number],
      default: '30px'
    },
    textSize: {
      type: [String, Number],
      default: '14px'
    },
    /**
     * @default 跟随props.color
     */
    textColor: String,
    /**
     * 是否垂直排列图标和文字内容
     */
    vertical: Boolean
  },
  setup(props) {
    const array12 = Array.from({ length: 12 })
    const array3 = Array.from({ length: 3 })

    const theStyle = computed(() => {
      const { color, textSize, textColor } = props
      return transformStyleSize({ color: textColor || color, fontSize: textSize })
    })

    const iconStyle = computed(() => {
      const { size, color } = props
      const s = transformSize(size)
      let str = `width:${s};height:${s};color:${color};`
      return str
    })

    return { array12, array3, theStyle, iconStyle }
  }
})
</script>

<template>
  <div class="fan-loading" :class="{ 'fan-loading--inline': inline, 'fan-loading--vertical': vertical }"
    :style="theStyle" @click="$emit('click', $event)">
    <div :class="['fan-loading__i', 'fan-loading__i--' + type]" :style="iconStyle">
      <template v-if="type === 'spinner'">
        <div v-for="(_, index) in array12" :key="index" class="fan-loading__dot" />
      </template>
      <template v-if="type === 'line'">
        <div v-for="(_, index) in array3" :key="index" class="fan-loading__ldot" />
      </template>
    </div>
    <div class="fan-loading__t">
      <slot />
    </div>
  </div>
</template>

<style lang="less">
.fan-loading {
  // --fan-loading-c2-color: #c9c9c9;

  display: flex;
  align-items: center;
  justify-content: center;

  &--inline {
    display: inline-flex;
  }

  &--vertical {
    flex-direction: column;

    .fan-loading__t {
      margin: 8px 0 0;
    }
  }

  &__i {
    position: relative;
    box-sizing: border-box;

    &--spinner {
      animation: fan-rotate 0.8s steps(12) infinite;
      // animation-timing-function: steps(12);
    }

    &--circle {
      border: 1px solid transparent;
      border-top-color: currentColor;
      border-radius: 100%;
      animation: fan-rotate 0.8s linear infinite;
    }

    &--circle2 {
      animation: fan-rotate 0.8s linear infinite;

      &::before,
      &::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 50%;
        box-sizing: border-box;
      }

      &::before {
        border: 2.5px solid currentColor;
        opacity: 0.2;
      }

      &::after {
        border: 2.5px solid transparent;
        border-top-color: currentColor;
      }
    }

    &--line {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  &__t {
    margin-left: 8px;

    &:empty {
      display: none;
    }
  }

  &__dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    &::before {
      display: block;
      width: 2px;
      height: 25%;
      margin: 0 auto;
      background-color: currentColor;
      border-radius: 40%;
      content: ' ';
    }
  }

  &__ldot {
    width: 24%;
    height: 24%;
    background: currentColor;
    border-radius: 100%;
    transform: scale(0);
    animation: fan-loading-zoom 1.2s linear infinite alternate;

    &:nth-of-type(2) {
      animation-delay: 0.4s;
    }

    &:nth-of-type(3) {
      animation-delay: 0.8s;
    }
  }
}

.generate(@n, @i: 1) when (@i =< @n) {
  .fan-loading__dot:nth-of-type(@{i}) {
    transform: rotate(@i * 30deg);
    opacity: 1 - (0.75 / 12) * (@i - 1);
  }

  .generate(@n, (@i + 1));
}

.generate(12);

@keyframes fan-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes fan-loading-zoom {
  0% {
    transform: scale(0);
  }

  20% {
    transform: scale(0);
  }

  90% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}
</style>
